<template>
	<section>
		<el-row :gutter="20" class="padtit">
			<el-col :span="4">整改照片（最多6张）：</el-col>
		</el-row>
		<el-row :gutter="20" class="pddtop">
			<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
				:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
				<i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		</el-row>
		<el-row class="padbak">
			<el-col :span="18">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-form-item label="备注:">
						<el-input type="textarea" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row class="pddpic">
			<el-col :span="24">
				<el-button type="primary">提交</el-button>
				<el-button>取消</el-button>
			</el-col>
		</el-row>

	</section>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',					
				dialogImageUrl: '',
				dialogVisible: false,
			}
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		}
	}
</script>
<style scoped="">
	.pddtop {
		padding: 5px 0 0px 170px;
	}

	.padtit {
		padding: 0px 0 10px 160px;
	}

	.padbak {
		padding: 20px 0 0 60px;
	}
	
	.pddpic{
		padding:30px 0 50px 160px
	}

	/* table */
	.am-tabs-bd .am-tab-panel * {
		-webkit-user-drag: none;
	}

	.am-table-bordered {
		border: 1px solid #ddd;
		border-left: none;
	}

	.am-table {
		width: 100%;
		margin-bottom: 1.6rem;
		border-spacing: 0;
		border-collapse: separate;
	}

	table {
		max-width: 100%;
		background-color: transparent;
		empty-cells: show;
	}

	.am-table-bordered>tbody>tr:first-child>td,
	.am-table-bordered>tbody>tr:first-child>th {
		border-top: none;
	}

	.am-table-centered>tbody>tr>td,
	.am-table-centered>tbody>tr>th,
	.am-table-centered>tfoot>tr>td,
	.am-table-centered>tfoot>tr>th,
	.am-table-centered>thead>tr>td,
	.am-table-centered>thead>tr>th {
		text-align: center;
	}

	.am-table-bordered>tbody>tr>td,
	.am-table-bordered>tbody>tr>th,
	.am-table-bordered>tfoot>tr>td,
	.am-table-bordered>tfoot>tr>th,
	.am-table-bordered>thead>tr>td,
	.am-table-bordered>thead>tr>th {
		border-left: 1px solid #ddd;
	}

	.am-table>tbody>tr>td,
	.am-table>tbody>tr>th,
	.am-table>tfoot>tr>td,
	.am-table>tfoot>tr>th,
	.am-table>thead>tr>td,
	.am-table>thead>tr>th {
		padding: .7rem;
		line-height: 1.6;
		vertical-align: top;
		border-top: 1px solid #ddd;
	}

	.am-text-middle {
		vertical-align: middle !important;
		font-weight: bold;
	}

	.tablestyle {
		padding: 0 120px;
	}
</style>
